<template>
  <div :id="localUUID" class="c-chartcolumnar"></div>
</template>

<script>
import moment from 'moment'
import { Chart } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
import componentRefresh from '@/mixins/componentRefresh'
// 准备数据
const DATA = []
const SHAPE = {
  矩形: 'square',
  圆形: 'circle',
  三角型: 'triangle',
  线型: 'line',
  连字符: 'hyphen'
}
const LAYOUT = {
  水平排列: 'horizontal',
  垂直排列: 'vertical'
}
const POSITION = {
  上对齐: 'top',
  上左对齐: 'top-left',
  上右对齐: 'top-right',
  下对齐: 'bottom',
  下左对齐: 'bottom-left',
  下右对齐: 'bottom-right',
  左对齐: 'left',
  左上对齐: 'left-top',
  左下对齐: 'left-bottom',
  右对齐: 'right',
  右上对齐: 'right-top',
  右下对齐: 'right-bottom'
}
export default {
  name: 'CChartcolumnar',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID()
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          console.warn(e)
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return DATA
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    LegendTextColor() {
      return this.props[0].fields[3].value[0].value.value
    },
    LegendSize() {
      return this.props[0].fields[3].value[1].value.value
    },
    LegendStyle() {
      return this.props[0].fields[3].value[2].value.value
    },
    LegendAlign() {
      return this.props[0].fields[3].value[3].value.value
    },
    LegendPosition() {
      return this.props[0].fields[3].value[4].value.value
    },
    ChageColor() {
      return this.props[0].fields[3].value[5].value.value
    },
    ChageColorChange() {
      return this.props[0].fields[3].value[6].value.value
    },
    xGrid() {
      return this.props[0].fields[4].value[0].value.value
    },
    xGridColor() {
      return this.props[0].fields[4].value[1].value.value
    },
    xLabelColor() {
      return this.props[0].fields[4].value[2].value.value
    },
    xLabelSize() {
      return this.props[0].fields[4].value[3].value.value
    },
    xLineColor() {
      return this.props[0].fields[4].value[4].value.value
    },
    xRotate() {
      return this.props[0].fields[4].value[5].value.value
    },
    xFormart() {
      return this.props[0].fields[4].value[6].value.value
    },
    yGrid() {
      return this.props[0].fields[5].value[0].value.value
    },
    yGridColor() {
      return this.props[0].fields[5].value[1].value.value
    },
    yLabelColor() {
      return this.props[0].fields[5].value[2].value.value
    },
    yLabelSize() {
      return this.props[0].fields[5].value[3].value.value
    },
    yLineColor() {
      return this.props[0].fields[5].value[4].value.value
    }
  },
  watch: {
    LegendSize(val) {
      // 图例文字大小
      this.legend()
      this.chartInstance.render()
    },
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendTextColor(val) {
      this.legend()
      this.chartInstance.render()
    },
    LegendStyle(val) {
      this.legend()
      this.chartInstance.render()
    },
    LegendAlign(val) {
      this.legend()
      this.chartInstance.render()
    },
    LegendPosition(val) {
      this.legend()
      this.chartInstance.render()
    },
    ChageColor() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    ChageColorChange() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    xGrid() {
      this.axisX()
      this.chartInstance.render()
    },
    xGridColor() {
      this.axisX()
      this.chartInstance.render()
    },
    xLabelColor() {
      this.axisX()
      this.chartInstance.render()
    },
    xLabelSize() {
      this.axisX()
      this.chartInstance.render()
    },
    xLineColor() {
      this.axisX()
      this.chartInstance.render()
    },
    xRotate() {
      this.axisX()
      this.chartInstance.render()
    },
    xFormart() {
      this.axisX()
      this.chartInstance.render()
    },
    yGrid() {
      this.axisY()
      this.chartInstance.render()
    },
    yGridColor() {
      this.axisY()
      this.chartInstance.render()
    },
    yLabelColor() {
      this.axisY()
      this.chartInstance.render()
    },
    yLabelSize() {
      this.axisY()
      this.chartInstance.render()
    },
    yLineColor() {
      this.axisY()
      this.chartInstance.render()
    },
    width(val) {
      this.resizeChart()
    },
    height(val) {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.initMapping()

      this.chartInstance = new Chart({
        container: this.localUUID,
        autoFit: false,
        width: width,
        height: height
      })
      this.chartInstance.data(this.dataTrigger)
      const pos = `${this.mappings[0].field}*${this.mappings[1].field}`
      const col = this.mappings[2].field
      const temp_color = this.ChageColor || []
      const colordata = temp_color.map((item, index) => {
        return `l(90) 0:${item} 1:${this.ChageColorChange[index] || item}`
      })
      this.chartInstance
        .interval({ maxColumnWidth: 25 })
        .position(pos)
        .color(col, colordata)
        .adjust([
          {
            type: 'dodge',
            dodgeBy: col, // 按照 type 字段进行分组
            marginRatio: 0 // 分组中各个柱子之间不留空隙
          },
          {
            type: 'stack'
          }
        ])
      this.chartInstance.tooltip({
        showCrosshairs: true,
        shared: true,
        showTitle: false
      })
      this.axisX()
      this.axisY()
      this.legend()
      this.chartInstance.interaction('element-active')
      this.chartInstance.render()
    },
    initMapping() {
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })
      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          {
            field: 'Date'
          },
          {
            field: 'Value'
          },
          {
            field: 'Group'
          }
        ]
      }
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.changeSize(width, height)
    },
    legend() {
      this.chartInstance.legend({
        itemName: {
          style: { fill: this.LegendTextColor, fontSize: this.LegendSize }
        },
        marker: {
          symbol: SHAPE[this.LegendStyle]
        },
        layout: LAYOUT[this.LegendAlign],
        position: POSITION[this.LegendPosition]
      })
    },
    axisX() {
      let grid = null
      if (this.xGrid) {
        grid = {
          line: {
            style: {
              lineWidth: 1,
              stroke: this.yGridColor
            }
          }
        }
      } else {
        grid = null
      }
      let format = null
      if (this.xFormart !== '不处理') {
        format = date => {
          return moment(date).format(this.xFormart)
        }
      }
      this.chartInstance.axis(this.mappings[0].field, {
        grid: grid,
        label: {
          style: {
            fill: this.xLabelColor,
            fontSize: this.xLabelSize
          },
          autoRotate: false,
          rotate: this.xRotate,
          formatter: format
        },
        line: {
          style: {
            stroke: this.xLineColor
          }
        }
      })
    },
    axisY() {
      let grid = null
      if (this.yGrid) {
        grid = {
          line: {
            style: {
              lineWidth: 1,
              stroke: this.yGridColor
            }
          }
        }
      } else {
        grid = null
      }
      this.chartInstance.axis(this.mappings[1].field, {
        grid: grid,
        label: {
          style: {
            fill: this.yLabelColor,
            fontSize: this.yLabelSize
          }
        },
        line: {
          style: {
            stroke: this.yLineColor
          }
        }
      })
    }
  }
}
</script>

<style>
.c-chartcolumnar {
  width: 100%;
  height: 100%;
}
</style>
